<template>
  <view class="msgContainer">
    <t-header @back="navBack">
      消息中心
      <template #right>
        <span @click="readAll"> 全部已读 </span>
      </template>
    </t-header>
    <view class="flex-1 content">
      <mescroll-uni
        :height="`${height - 72 - 76}rpx`"
        @init="mescrollInit"
        @down="downCallback"
        :up="upOption"
        :down="downOption"
        @up="upCallback"
      >
        <view v-if="list.length > 0" class="list">
          <view
            v-for="(item, index) in list"
            :key="index"
            class="flex border-bottom item"
          >
            <view class="flex flex-1" @click="toDetail(item)">
              <view class="padding-left-sm flex-sub flex align-center">
                <view class="flex v-align-center">
                  <view class="ellipsis">{{ item.title }}</view>
                  <view class="" :class="item.is_read == 0 && 'unread'"></view>
                </view>
                <view class="text-sm text-gray ml-auto">{{
                  item.createtime
                }}</view>
              </view>
            </view>
          </view>
        </view>
      </mescroll-uni>
    </view>
  </view>
</template>

<script setup>
  import { ref } from 'vue';
  import { onPageScroll, onReachBottom, onShow } from '@dcloudio/uni-app';
  import useMescroll from '@/uni_modules/mescroll-uni/hooks/useMescroll.js';
  import { getMsgs, allRead } from '@/api/index.js';
  import THeader from '@/components/views/t-header/index.vue'; // 头部组件
  const { mescrollInit, downCallback, getMescroll } = useMescroll(
    onPageScroll,
    onReachBottom
  );

  const list = ref([]);
  const pageInit = ref(false);

  // mescroll-body 配置（down && up）
  const downOption = {
    auto: true,
  };
  const upOption = {
    auto: false,
    empty: {
      use: true,
      icon: '/static/images/wushuju.png',
      tip: '~ 空空如也 ~',
    },
  };

  const toDetail = (item) => {
    uni.navigateTo({
      url: `./detail?id=${item.id}&title=${item.title}&createtime=${item.createtime}`,
    });
  };

  const upCallback = async (mescroll) => {
    const res = await getMsgs({
      page: mescroll.num,
    });

    pageInit.value = true;
    if (res.data && res.data.list && res.data.list.data) {
      if (mescroll.num === 1) {
        list.value = [];
      }
      list.value = list.value.concat(res.data.list.data);
      mescroll.endSuccess(res.data.list.data.length);
    }
  };

  const readAll = async () => {
    await allRead();
    downCallback();
  };

  const navBack = () => {
    uni.navigateBack();
  };

  onShow(() => {
    if (pageInit.value) {
      downCallback();
    }
  });
</script>

<style lang="scss" scoped>
  .msgContainer {
    height: 100%;
    display: flex;
    flex-direction: column;
    .content {
      margin: 0rpx 18rpx;
    }
  }

  .icon {
    width: 80rpx;
    height: 80rpx;
  }
  .flex-1 {
    flex: 1;
  }

  .list {
    background: #ffffff;
    border-radius: 34rpx;
    padding: 28rpx 54rpx;
    .item {
      height: 126rpx;
    }
  }
  .ml-auto {
    margin-left: auto;
  }

  .unread {
    width: 10rpx;
    height: 10rpx;
    background: #f74e51;
    border-radius: 50%;
    margin-left: 5rpx;
  }
  .v-align-center {
    align-items: center;
  }
</style>
